<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
  <home></home>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
const CommonTitle = {
  template: `
    <div>
      a=>{{a}}
      b=>{{b}}
      a=>{{a}}
      c=>{{c}}
      d=>{{d}}
      <ul>
        <li v-for="item in e" :key="item">
          {{item}}
        </li>
      </ul>
    </div>
  `,
  props:{
    a:Number,
    b:[String,Number],
    c:{
      type:String,
      required:true
    },
    d:{
      type:Number,
      default:0
    },
    e:{
      type:Array,
      default: ()=>['a','b','c','d']
    }

  }
}
const Home={
  template:`
    <div>
      home组件
      <common-title :a="1" :b="msg" c="你好世界"></common-title>
    </div>
  `,
  data(){
    return{
      msg: '我是home标题'
    }
  },
  components:{
    CommonTitle
  }
}
Vue.component('Home', Home);
const vm = new Vue ( {
  el: '#app'
} )
</script>
</html>